<template>
<div>
  <z-collapse v-model:activeKey="value" ghost expandIconPosition="right" @change="logkey" >
  <z-collapse-panel key="1" header="这是panel 1">
    <h1>哈哈panel1</h1>
  </z-collapse-panel>
  <z-collapse-panel key="2" header="这是panel 2">
    <h1>哈哈panel2</h1>
  </z-collapse-panel>
  <z-collapse-panel key="3" header="这是panel 3">
    <h1>哈哈panel3</h1>
  </z-collapse-panel>
  </z-collapse>
  <br />
  <h3>当前激活键：{{actV}}</h3>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'CollapseDemo2',
  setup(){
    const value = ref('2')
    const actV = ref('')
    const logkey = (k)=>{
      console.log('logkey', k);
      actV.value = k
    }
    return {
        value,
        actV,
        logkey
    }
  }
})
</script>